<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/12/6
  Time: 14:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>个人信息</title>
    <!-- 引入样式和js -->
    <jsp:include page="../../common/css_js.jsp"/>
</head>
<body>
<div class="container-fluid p-t-15">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <form method="post" action="#" class="site-form" enctype="multipart/form-data" ,>
                        <div class="media">
                            <img src="${ctx}/static/images/users/${sessionScope.session_user.userImg}"
                                 alt="..." class="img-avatar mr-3" width="80px" height="80px">
                            <div class="media-body">
                                <div class="custom-file" style="width: 140px;">
                                    <input type="file" class="custom-file" name="file" id="inputGroupFile01">
                                    <label class="custom-file-label" for="inputGroupFile01">修改头像</label>
                                </div>
                                <p class="mt-1 mb-0">
                                    选择一张你喜欢的图片，裁剪后会自动生成264x264大小，上传图片大小不能超过2M。</p>
                            </div>
                        </div>
                        <hr/>
                        <div class="form-group">
                            <label for="username">账号</label>
                            <input type="text" class="form-control" readonly id="username"
                                   value="${sessionScope.session_user.username}">
                        </div>
                        <div class="form-group">
                            <label for="nickname">昵称</label>
                            <input type="text" class="form-control" name="nickname" id="nickname"
                                   placeholder="输入您的姓名"
                                   value="${sessionScope.session_user.nickname}">
                        </div>
                        <div class="form-group">
                            <label for="email">邮箱</label>
                            <input type="email" class="form-control" name="userEmail" id="email"
                                   aria-describedby="emailHelp" placeholder="请输入正确的邮箱地址"
                                   value="${sessionScope.session_user.userEmail}">
                            <small id="emailHelp" class="form-text text-muted">请保证您填写的邮箱地址是正确的。</small>
                        </div>
                        <div class="form-group">
                            <label for="phone">电话号码</label>
                            <input type="text" class="form-control" name="userPhone" id="phone"
                                   aria-describedby="phoneHelp" placeholder="请输入正确的电话号码"
                                   value="${sessionScope.session_user.userPhone}">
                            <small id="phoneHelp" class="form-text text-muted">请保证您填写的电话号码是正确的。</small>
                        </div>
                        <div class="form-group">
                            <label for="date">注册时间</label>
                            <input type="text" class="form-control" id="date"
                                   value="${sessionScope.session_user.createDate}" readonly="readonly"/>
                        </div>
                        <input type="hidden" name="id" value="${sessionScope.session_user.id}"/>
                        <input type="hidden" name="userImg" value="${sessionScope.session_user.userImg}"/>

                        <button type="reset" class="btn btn-primary"><span class="mdi mdi-refresh"></span>重置</button>
                        <button type="button" class="btn btn-primary" id="upd"><span
                                class="mdi mdi-checkbox-marked-outline"></span>保存
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        // 修改单击事件
        $("#upd").click(function (e) {
            let obj = new FormData($("form")[0]);
            $.ajax({
                type: "POST",
                url: "${ctx}/user/update-profile",
                data: obj,
                dataType: "json",
                processData: false,  // 告诉jquery不要去处理请求的数据格式
                contentType: false,  // 告诉jquery不要设置请求头的类型
                success: function (res) {
                    let loader = $('body').lyearloading({
                        opacity: 0.2,
                        spinnerSize: 'lg'
                    });
                    setTimeout(function () {
                        loader.destroy();
                        if (res.code === 200) {
                            notify("mdi mdi-checkbox-marked-circle-outline", "修改成功!", "success");
                            setTimeout(function () {
                                window.top.$("#title_img").attr("src", "${ctx}/static/images/users/" + res.data.userImg);
                                location.reload();
                            }, 1e3)
                        } else {
                            notify("mdi mdi-close", "修改失败!请重试...", "danger");
                        }
                    }, 1e3);

                },
                error: function () {
                    notify("mdi mdi-close", "出错了!请重试...", "danger");
                }
            });
        });

        // 回车触发事件
        document.onkeydown = function (e) {
            let theEvent = window.event || e;
            let keyCode = theEvent.keyCode || theEvent.which || theEvent.charCode;
            if (keyCode === 13) {
                $("#upd").click();
            }
        }
    });

</script>
</body>
</html>
